{% extends 'base.html' %}
{% load static %}
{% load user_tags %}

{% block title %}我的网站|注册{% endblock %}
{% block nav_home_active %}active{% endblock %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-4">
                {% if not user.is_authenticated %}
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">注册</h3>
                        </div>
                        <div class="panel-body">
                            <form action="" method="POST">
                                {% csrf_token %}
                                {% for field in reg_form %}
                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {% if field.id_for_label == 'id_email' %}
                                        <div class="input-group">
                                          {{ field }}
                                          <span class="input-group-btn">
                                              <button id="send_code" class="btn btn-default">发送验证码</button>
                                          </span>
                                        </div>
                                    {% else %}
                                        {{ field }}
                                    {% endif %}
                                    <p class="text-danger">{{ field.errors.as_text }}</p>
                                {% endfor %}
                                <span id="tip" class="text-danger">{{ reg_form.non_field_errors }}</span>
                                <div class="clearfix"></div>    
                                <a style="margin-top: 8px; display: inline-block;" href="{% get_login_qq_url %}">
                                    <img src="{% static 'user/qq.png' %}">
                                    使用QQ账号登录
                                </a>                             
                                <input type="submit" value="注册" class="btn btn-primary pull-right">
                            </form>
                        </div>
                    </div>    
                    {% if request.GET.from %}
                        <a style="text-align: center; display: block;" href="{% url 'login' %}?from={{ request.GET.from }}">前往登录 &gt;&gt;</a>
                    {% else %}
                        <a style="text-align: center; display: block;" href="{% url 'login' %}?from={{ request.get_full_path }}">前往登录 &gt;&gt;</a>
                    {% endif %}
                    
                {% else %}
                    <span>已登录，跳转到首页...</span>
                    <script type="text/javascript">
                        window.location.href = '/';
                    </script>
                {% endif %}              
            </div>
        </div>
    </div>    
{% endblock %}

{% block script_extends %}
    <script type="text/javascript">
        $("#send_code").click(function(){
            var email = $("#id_email").val();
            if(email==""){
                $("#tip").text('* 邮箱不能为空');
                return false;
            }

            // 发送验证码
            $.ajax({
                url: "{% url 'send_verification_code' %}",
                type: "GET",
                data: {
                    'email': email,
                    'send_for': 'register_code'
                },
                cache: false,
                success: function(data){
                    if(data['status']=='ERROR'){
                        alert(data['status']);    
                    }                    
                }
            });

            // 把按钮变灰
            $(this).addClass('disabled');
            $(this).attr('disabled', true);
            var time = 30;
            $(this).text(time + 's');
            var interval = setInterval(() => {
                if(time <= 0){
                    clearInterval(interval);
                    $(this).removeClass('disabled');
                    $(this).attr('disabled', false);
                    $(this).text('发送验证码');
                    return false;
                }

                time --;
                $(this).text(time + 's');
            }, 1000);
        });
    </script>
{% endblock %}